<template>
  <div style="padding-top: 10px;background-color: #ffffff">
    <!-- 表单 -->
    <el-form :inline="true" :model="page" class="demo-form-inline">
      <el-form-item label="">
        <el-input v-model="page.queryString" placeholder="姓名/日期/IPv4地址"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="el-icon-search" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" class="el-icon-download" @click="exportTable">导出</el-button>
      </el-form-item>
    </el-form>
    <div class="type">
      <el-table :data="tableData" :pagination="false" border style="width: 100%"
                @selection-change="handleSelectionChange" height="470">
        <el-table-column fixed type="selection" width="50%" align="center" />
        <el-table-column prop="name" label="姓名" width="200" align="center"></el-table-column>
        <el-table-column prop="username" label="账号" width="200" align="center"></el-table-column>
        <el-table-column prop="addIp" label="IP地址" width="220" align="center"></el-table-column>
        <el-table-column prop="loginTime" label="登陆时间" width="240" align="center" :formatter="formatDateTime"></el-table-column>
        <el-table-column prop="address" label="地址" width="220" align="center"></el-table-column>
        <el-table-column prop="hostName" label="设备信息" width="220" align="center"></el-table-column>
      </el-table>
    </div>
    <!--分页-->
    <div style="text-align: right;padding: 10px 20px;" >
      <el-pagination
        @size-change="handlePageSizeChange"
        @current-change="handleCurrentPageChange"
        :current-page="page.page"
        :page-sizes="[100, 200, 300, 400, 500]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total" />
    </div>
  </div>
</template>
<script>
import zhCn from 'element-ui/lib/locale/lang/zh-CN'
import { logSubmit } from '../../api/log'

// import moment from 'moment'
export default {
  data () {
    return {
      houduanBashurl: '',
      locale: zhCn,
      dialogFormVisible: false,
      visible: false,
      formLabelWidth: '120px',
      tableData: [],
      ExcelTableData: [],
      form: [],
      page: {
        total: 10,
        currentPage: 1,
        pageSize: 100,
        queryString: ''
      },
      formData: {}
    }
  },
  components: {
  },
  props: [],
  created () {
    this.houduanBashurl = this.$requestcode.defaults.baseURL
    this.getData()
  },
  computed: {
  },
  methods: {
    async getData () {
      const logData = {
        currentPage: this.page.currentPage,
        pageSize: this.page.pageSize,
        queryString: this.page.queryString
      }
      try {
        await logSubmit(logData).then(resp => {
          const data = resp.data
          this.page.total = data.total
          this.tableData = data.rows
        })
      } catch (error) {
        this.handleAxiosError(error)
      }
    },
    onSubmit () {
      this.page.currentPage = 1
      this.getData()
    },
    // formatDateTime (row, column, cellValue) {
    //   const formattedDateTime = moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
    //   return formattedDateTime
    // },
    exportTable () {
      const ids = this.ExcelTableData.length > 0 ? this.ExcelTableData.map(row => row.id) : ''
      // const ids = this.tableData.id
      // logExcel()
      // window.open('http://127.0.0.1:8888/log/export/', ids)
      this.$confirm('导出所有数据或仅选中数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 检查是否有选中数据
        if (ids && ids.length > 0) {
          // 有选中数据时构建包含选中数据ID的导出URL
          const exportUrl = `${this.houduanBashurl}/log/export/${ids}`
          console.log('exportUrl:', exportUrl)
          window.location.href = exportUrl
        } else {
          // 没有选中数据时，使用默认导出URL
          const defaultExportUrl = `${this.houduanBashurl}/log/export`
          window.location.href = defaultExportUrl
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
          center: true
        })
      })
    },
    handlePageSizeChange (pageSize) {
      this.page.pageSize = pageSize
      // this.page.currentPage = 1 // 重置为第一页
      this.getData()
    },
    handleCurrentPageChange (currentPage) {
      this.page.currentPage = currentPage
      this.getData()
    },
    handleSelectionChange (selection) {
      this.ExcelTableData = selection
    },
    handleAxiosError (error) {
      // 检查是否是Axios的网络错误
      if (error.isAxiosError && error.response) {
        // 处理您的网络错误，例如显示用户友好的提示
        this.$message.error('网络请求失败，请稍后重试')
      } else {
        // 处理其他类型的错误
        this.$message.error('网络请求失败，发生错误，请稍后重试')
      }
    }
  }
}
</script>

<style scoped>
/*@import "../../assets/css/style.css";*/
</style>
